<template>
  <div class="min">
    <div class="head">{{$t('nav.exchange')}}</div>
    <div class="tab">
      <ul>
        <li :ref="'tabs'+item.id" v-for="item in tab" :key="item.id" @click="liFn(item.id)" :class="item.id ===typeShow?'current':''">
          {{item.label}}
        </li>
      </ul>
    </div>
    <van-tabs v-model="active" swipeable animated sticky>
      <van-tab v-for="item in platform" :key="item.name" v-if="item.label !== 'sbt' || typeShow !== 2">
        <template #title >{{ $t(item.label) }}</template>
        <template v-if="account">
          <div class="amount weight">{{ $t('balance') }} {{ Number(account['USDT'] ||account['BTC'] || 0) | numberFormat(8) }} USDT</div>
        </template>
        <template v-else>
          <div class="amount">
            <p>{{ $t('balance') }} <span v-if="account"> {{ Number(account['USDT'] || 0) | numberFormat(8) }}</span> USDT, {{ $t('not') }}</p>
            <nuxt-link to="/authorize">{{ $t('add') }}</nuxt-link>
          </div>
        </template>
        <assets-list ref="assetsList" v-if="typeShow==1" :platform="item.label"></assets-list>
        <assets-list-contract ref="assetsList1" v-else :platform="item.label"></assets-list-contract>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import assetsList from './components/assetsList'
import assetsListContract from './components/assetsContract'
export default {
  layout: 'navigation',
  i18n: {
    messages: {
      zh: {
        not: '您还未添加该平台的API',
        add: '立即添加',
        balance: '账户余额'
      },
      en: {
        not: 'You have not added the platform\'s API',
        add: 'Add Now',
        balance: 'Balance'
      },
      jp: {
        not: 'このプラットフォームのAPIを追加していません',
        add: '今すぐ追加',
        balance: '勘定残高'
      },
      kr: {
        not: '이 플랫폼의 API를 추가하지 않았습니다.',
        add: '지금 추가',
        balance: '계정 잔액'
      }
    }
  },
  components: {
    assetsList,
    assetsListContract
  },
  data () {
    return {
      active: 0,
      account: '',
      typeShow: 1,
      tab:[{
        label:this.$t('nav.spot'),
        id:1
      },
      {
        label:this.$t('nav.contract'),
        id:2
      }]
    }
  },
  computed: {
    ...mapState({
      platform: ({ robot }) => robot.platform
    })
  },
  watch: {
    active (newVal) {

      if(this.typeShow == 1){
        this.account = ''
        this.apiAccountBalanceSwap({ platform: this.platform[newVal].label }).then((res) => {
          this.account = res.data.free
        })
      }else{
        this.account = ''
        this.apiAccountBalance({ platform: this.platform[newVal].label }).then((res) => {
          this.account = res.data.free
        })
      }

    },
    typeShow (newVal) {

      if(newVal == 1){
        this.account = ''
        this.apiAccountBalanceSwap({ platform: this.platform[this.active].label }).then((res) => {
          this.account = res.data.free
        })
      }else{
        this.account = ''
        this.apiAccountBalance({ platform: this.platform[this.active].label }).then((res) => {
          this.account = res.data.free
        })
      }

    }
  },
  mounted() {
    if(this.typeShow == 1){
        this.apiAccountBalanceSwap({ platform: this.platform[0].label }).then((res) => {
          this.account = res.data.free
        })
    }else{
      this.apiAccountBalance({ platform: this.platform[0].label }).then((res) => {
        this.account = res.data.free
      })
    }
    // this.$nextTick(() => {
    //   this.liFn(this.typeShow)
    // })
  },
  methods: {
    liFn(type) {
      this.typeShow = type
      this.$nextTick(() => {
      //  this.$refs[type == 2 ? 'assetsList' : 'assetsList1'][0].loadData();
      })
    },
    ...mapActions({
      apiAccountBalance: 'authorize/apiAccountBalance',
      apiAccountBalanceSwap: 'authorize/apiSwapAccountBalance'
    })
  }
}
</script>

<style lang="less" scoped>
.min{
  padding: 0 12px;
    .head{
      padding: 14px 0 12px 0;
      font-size: 20px;
      text-align: center;
      font-weight: 500;
      color: #000000;
    }
  .tab{
    height: 45px;
    background: #FFFFFF;
    border-radius: 8px;
    ul{
      padding: 2px 4px;
      display: flex;
      align-items: center;
      li{
        flex: 1;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 500;
        color: #9B9B9B;
        text-align: center;
        &.current{
          color: #FFFFFF;
          background: linear-gradient(90deg, #366FF9 0%, #6D97FA 100%);
          border-radius: 8px;
        }
      }
    }
  }
}
.van-tabs{
  /deep/.van-sticky{
    &.van-sticky--fixed{
      padding: 0 12px;
      .van-tabs__wrap{
        .van-tabs__nav{
          background: #ffffff;
        }
      }
    }
    .van-tabs__wrap{
      height: 33px;
      .van-tabs__nav{
        background: transparent;
        padding-bottom: 0;
        .van-tab{
          .van-tab__text{
            font-size: 15px;
            font-weight: 500;
            color: #999999;
            line-height: 21px;
          }
          &.van-tab--active{
            .van-tab__text{
              color: #366FF9;
            }
          }
        }
        .van-tabs__line{
          bottom: 0;
          width: 30px;
          height: 3px;
          background: #366FF9;
          border-radius: 2px;
        }
      }
    }
  }

  .van-tab__pane-wrapper{
    background: #FFFFFF;
    padding: 12px;
    border-radius: 12px;
    .amount{
      display: flex;
      height: 40px;
      padding: 0 16px;
      background: #F4F7FD;
      border-radius: 6px;
      align-items: center;
      font-size: 11px;
      font-weight: 400;
      color: #9B9B9B;
      justify-content: space-between;
      &.weight{
        color: #4A4A4A;
        font-weight: 500;
      }
      a{
        font-weight: 500;
        color: #3871F9;
      }
    }
  }
}

</style>
